<template>
  <el-dialog
    class="res-dialog"
    :model-value="props.dialogVisible"
    @update:model-value="$emit('update:dialogVisible', $event)"
    :before-close="beforeClone"
    @close="handleClose"
    :width="width"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    lock-scroll="true"
  >
    <template #header>{{ props.title }}</template>
    <div class="res_el_dialog__body">
      <slot />
    </div>
    <template #footer><slot name="footer"/></template>
  </el-dialog>
</template>
<script setup lang="ts">

defineOptions({ name: 'DialogBox' })

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  dialogVisible: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '940px'
  },
  beforeClone: {
    type: Function,
    default: (done: () => void) => done()
  }
})


// 定义可触发的事件
const emit = defineEmits(['update:dialogVisible', 'close'])

// 处理关闭事件
const handleClose = () => {
  emit('close') // 触发父组件的 close 事件
  emit('update:dialogVisible', false) // 确保同步 dialogVisible 状态
}

</script>

<style lang="scss" scope>
.res-dialog {
  padding: 0;
  border-radius: 12px;
  .el-dialog__header{
    background: linear-gradient( 90deg, #E7EEFF 0%, #DAEAFF 48%, #DAF4FF 100%);
    padding: 0px 30px;
    height: 48px;
    line-height: 48px;
    border-radius: 12px 12px 0px 0px;
    box-sizing: border-box;
    .el-dialog__headerbtn{
      top:0
    }
  }
  .res_el_dialog__body{
      padding: 24px 30px 0 30px;
      max-height: 60vh;
      overflow-y: scroll;
  }

  .el-dialog__close{
    color: #333;
  }
}

</style>
